import React, {useState, useEffect, Fragment, useRef} from 'react'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  ViewStyle,
  ImageStyle,
  TextStyle,
  TextInput,
  Modal,
} from 'react-native'
import Pickier from 'react-native-picker'
import {RadiusButton, InfoLayout} from 'components'
import assets from 'modules/assets'
import {translateSize, commonStyle, themeColors, definedColors} from 'styles'
import pos, {PosAppCustomer, PosCustomer, PosAppBank} from 'api/pos'
import custom from 'api/custom'
import {getAuthorization, operate} from 'services/authorization'
import {identityDetailStyle} from './style'

const ChooseCustomerScreen: NavigationStackScreenComponent<{data: PosCustomer}> = props => {
  const [mode, setMode] = useState<number>(null)
  const [modeText, setModeText] = useState<string>('')
  const [keyword, setKeyword] = useState<string>('')
  const [modalVisible, setModalVisible] = useState<boolean>(false)
  const [currentCustomer, setCurrentCustomer] = useState<PosAppCustomer>({})

  return (
    <View style={[commonStyle.containerColumn, container]}>
      <TouchableOpacity
        onPress={() => {
          Pickier.init({
            pickerData: ['证件号', '电话'],
            // pickerData: ['证件号', '公司名称', '电话', '法人姓名', '购买房源'],
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerTitleText: '选择类型',
            onPickerConfirm: item => {
              // @ts-ignore
              setModeText(item[0])
              if (item[0] === '证件号') {
                setMode(1)
              }
              if (item[0] === '电话') {
                setMode(2)
              }
            },
          })
          Pickier.show()
        }}>
        <View
          style={{
            width: '100%',
            height: translateSize(100),
            backgroundColor: '#fff',
            borderRadius: translateSize(10),
            padding: translateSize(20),
            marginBottom: translateSize(20),
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
          <Text
            style={{
              color: '#1A1A1A',
            }}>
            {modeText || '请选择'}
          </Text>
          <Image
            style={{
              width: translateSize(20),
              height: translateSize(10),
            }}
            source={assets.images.icon_arrow_down_black}
          />
        </View>
      </TouchableOpacity>
      <TextInput
        style={{
          backgroundColor: '#fff',
          borderRadius: translateSize(8),
          paddingHorizontal: translateSize(24),
        }}
        onChangeText={text => {
          setKeyword(text)
        }}
        value={keyword}
        keyboardType={'default'}
        placeholder={`请输入${mode === 1 ? '法人身份证' : mode === 2 ? '电话号码' : ''}`}
      />
      <RadiusButton
        style={{
          height: translateSize(96),
          position: 'absolute',
          bottom: translateSize(30),
          left: translateSize(32),
        }}
        onPress={async () => {
          let projectId = getAuthorization().project.mdId
          let tel = mode == 2 ? keyword : ''
          let cardNo = mode == 1 ? keyword : ''
          let customer = await custom.customer.getCustomerInfo({projectId, tel, cardNo, mode})
          if (customer.result) {
            let cstId = customer.data.cstId
            // let sale = await custom.sale.getBookFee({projectId, cstId})
            // console.log('sale')
            // console.log(sale)
            let nextRouteName = props.navigation.getParam('nextRouteName')
              // @ts-ignore
            props.navigation.navigate(nextRouteName, {cstId})
            // {"data": [{"bookingCode": "耀胜98", "bookingId": "a5bdcf11-0754-ed11-80f5-005056867dae", "dsAmount": 0, "feeId": "a5bdcf11-0754-ed11-80f5-005056867dae", "filingsName": "耀胜新世界-一期-耀胜尊府-T1栋-1101,耀胜新世界-一期-耀胜尊府-T1栋-801,耀胜新世界-一期-耀胜尊府-T1栋-601", "fundName": "预约金", "fundType": "其它", "lastDate": null, "payableAmount": 0, "receivableAmount": 0, "receivedAmount": 0, "roomId": "20A52B84-8E18-ED11-80F4-005056867DAE,2EA52B84-8E18-ED11-80F4-005056867DAE,37A52B84-8E18-ED11-80F4-005056867DAE", "roomName": "耀胜新世界-一期-耀胜尊府-T1栋-1101,耀胜新世界-一期-耀胜尊府-T1栋-801,耀胜新世界-一期-耀胜尊府-T1栋-601"}], "msg": "", "result": true}
          } else {
            setModalVisible(true)
          }
        }}>
        <Text style={{fontSize: translateSize(28), color: definedColors.white}}>查询</Text>
      </RadiusButton>
      <Modal
        animationType={'slide'}
        presentationStyle={'formSheet'}
        transparent={true}
        visible={modalVisible}>
        <View
          style={{
            height: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0,0,0,0.5)',
          }}>
          <View
            style={{
              height: translateSize(500),
              width: translateSize(690),
              paddingHorizontal: translateSize(80),
              borderRadius: translateSize(10),
              overflow: 'hidden',
              backgroundColor: 'white',
            }}>
            <View
              style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'flex-start',
              }}>
              <View
                style={{
                  width: translateSize(120),
                  height: translateSize(120),
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: '#F1F1F1',
                  borderRadius: translateSize(100),
                }}>
                <Image
                  style={{
                    width: translateSize(52),
                    height: translateSize(52),
                  }}
                  source={assets.images.icon_cry}
                />
              </View>
              <Text
                style={{
                  color: '#1A1A1A',
                  marginTop: translateSize(30),
                  marginBottom: translateSize(20),
                  fontWeight: 'bold',
                }}>
                查询失败
              </Text>
              <Text>暂无法找到该用户信息</Text>
              <RadiusButton
                style={{
                  width: '100%',
                  height: translateSize(96),
                  marginTop: translateSize(30),
                }}
                onPress={() => {
                  setModalVisible(false)
                }}>
                <Text
                  style={{
                    color: '#fff',
                  }}>
                  重新查询
                </Text>
              </RadiusButton>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  )
}

ChooseCustomerScreen.navigationOptions = props => {
  return {
    title: '个人身份',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#212447',
      backgroundColor: '#212447',
    },
  }
}

const container: ViewStyle = {
  backgroundColor: themeColors.pageBg,
  padding: translateSize(32),
  height: '100%',
}

const itemContainer: ViewStyle = {
  width: '100%',
  height: translateSize(215),
  paddingLeft: translateSize(62),
  paddingVertical: translateSize(42),
  paddingRight: translateSize(30),
  flexDirection: 'row',
  alignItems: 'center',
  position: 'relative',
  backgroundColor: definedColors.white,
  borderRadius: translateSize(10),
  marginBottom: translateSize(32),
}

const itemIcon: ImageStyle = {
  width: translateSize(80),
  height: translateSize(80),
}

const itemContent: ImageStyle = {
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: '100%',
  height: '100%',
}

const itemLayout: ViewStyle = {
  paddingTop: translateSize(0),
  paddingBottom: translateSize(0),
  paddingLeft: translateSize(55),
}

const itemTellFont: TextStyle = {
  fontSize: translateSize(24),
  color: definedColors.grayContent,
}

const itemNameFont: TextStyle = {
  fontSize: translateSize(28),
  color: definedColors.gray33,
}

const itemCheckContainer: ViewStyle = {
  position: 'absolute',
  right: 0,
  top: 0,
  padding: translateSize(28),
}

const itemCheckImage: ImageStyle = {
  width: translateSize(50),
  height: translateSize(50),
}

export default ChooseCustomerScreen
